<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户管理</title>
    <link href="../../../static/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
    <script type="text/javascript" src="../../../static/js/getParameter.js"></script>
</head>
<script type="text/javascript">
    function tipOpen(uId,statusId) {
        $.ajax({
            type: "post",
            url: "/users/updateStatusId",
            data: {uId:uId,statusId:statusId},
            dataType: "JSON",
            success: function () {
                window.location.href = "findByPage";
            },
            error: function (rm) {
                alert(rm.msg);
            }
        });
    }

    function tipClose() {
        $("#tip").fadeOut(200);
    }

    $(function () {
        var uIdlike = $("#uIdlike").val();
        var uname = $("#uname").val();
        var deptNamelike = $("#deptName").val();
        var statusId = $("#statusId").val();
        var pageNum = 1;

        // URL解码
        if (uIdlike) {
            uIdlike = window.decodeURIComponent(uIdlike);
        }
        if (uname) {
            uname = window.decodeURIComponent(uname);
        }
        if (statusId) {
            statusId = window.decodeURIComponent(statusId);
        }
        if (deptNamelike) {
            deptNamelike = window.decodeURIComponent(deptNamelike);
        }

        //部门查询
        $.ajax({
            type: "post",
            url: "/dept/deptList",
            data: {},
            dataType: "JSON",
            success: function (rm) {
                var deptstr = '<option value="">请选择</option>';
                for (let i = 0; i < rm.data.length; i++) {
                    if(rm.data[i].deptState == 1 ){
                        deptstr += '<option value="' + rm.data[i].deptId + '">' + rm.data[i].deptName + '</option>\n';
                    }
                }
                $("#deptName").html(deptstr);
            },
            error: function (rm) {
                alert(rm.msg)
            }
        });

        load(pageNum, uIdlike, uname, deptNamelike, statusId);
    })

    //分页条件查询
    function load(pageNum, uIdlike, uname, deptNamelike, statusId) {
        $.ajax({
            type: "post",
            url: "/users/pageUsers",
            data: {pageNum: pageNum, uIdlike: uIdlike, uname: uname, deptNamelike: deptNamelike, statusId: statusId},
            dataType: "JSON",
            async: true,
            success: function (rm) {

                let list = rm.data.data;
                let str = '    <thead>\n' +
                    '        <tr>\n' +
                    '          <th>序号</th>\n' +
                    '          <th>员工编号</th>\n' +
                    '          <th>员工姓名</th>\n' +
                    '          <th>联系电话</th>\n' +
                    '          <th>所属部门</th>\n' +
                    '          <th>职位</th>\n' +
                    '          <th>性别</th>\n' +
                    '          <th>出生年月</th>\n' +
                    '          <th>状态</th>\n' +
                    '          <th>入职时间</th>\n' +
                    '          <th>离职时间</th>\n' +
                    '          <th>操作</th>\n' +
                    '        </tr>\n' +
                    '      </thead>\n' +
                    ' <tbody>';
                for (let i = 0; i < list.length; i++) {

                    let gender;
                    if (list[i].sex == 1) {
                        gender = '男';
                    } else if (list[i].sex == 2) {
                        gender = '女';
                    } else {
                        gender = list[i].sex;
                    }
                    let status;
                    if (list[i].statusId == 1) {
                        status = "在职";
                    } else {
                        status = "离职";
                    }

                    str += '        <tr>\n' +
                        '          <td>' + (i + 1) + '</td>\n' +
                        '          <td>' + list[i].uid + '</td>\n' +
                        '          <td>' + list[i].uname + '</td>\n' +
                        '          <td>' + list[i].utelephone + '</td>\n' +
                        '          <td>' + list[i].deptName + '</td>\n' +
                        '          <td>' + list[i].jobName + '</td>\n' +
                        '          <td>' + gender + '</td>\n' +
                        '          <td>' + list[i].birthday + '</td>\n' +
                        '          <td>' + status + '</td>\n' +
                        '          <td>' + list[i].hiredate + '</td>\n' +
                        '          <td>' + list[i].leavedate + '</td>\n' +
                        '          <td>\n' +
                        '            <a href="userView" class="tablelink" onclick="view(' + list[i].uid + ')">查看详情</a>\n' +
                        '            <a href="userUpdate" class="tablelink" onclick="update(' + list[i].uid + ')">修改</a>\n';
                    if (status === "在职") {
                        str += '            <a href="javascript:void(0);" class="tablelink" onclick="tipOpen(' + list[i].uid + ','+list[i].statusId+')">离职</a>';
                    }else {
                        str += '            <a href="javascript:void(0);" class="tablelink" onclick="tipOpen(' + list[i].uid + ','+list[i].statusId+')">入职</a>';
                    }

                    str += '          </td>\n' +
                        '        </tr>'
                }
                str += "  </tbody>";
                $("#usersTable").html(str);

                $("#totalCount").html(rm.data.totalCount);
                $("#pageNum").html(rm.data.pageNum);

                let begin = rm.data.pageNum - 5;
                let end = rm.data.pageNum + 4;
                if (begin < 1) {
                    begin = 1;
                    if (rm.data.totalPage < 10) {
                        end = rm.data.totalPage;
                    } else {
                        end = 10;
                    }
                }

                if (end > rm.data.totalPage) {
                    end = rm.data.totalPage;
                    if (begin < 0) {
                        begin = 1;
                    } else {
                        if (rm.data.totalPage > 10) {
                            begin = rm.data.totalPage - 9;
                        } else {
                            begin = 1;
                        }
                    }
                }


                let index = '<li class="paginItem" onclick="javascript:load(1,\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')"><a href="javascript:void(0)">首页</a></li>';
                let beforeNum = rm.data.pageNum - 1;
                if (beforeNum < 1) {
                    beforeNum = 1;
                }
                index += '<li class="paginItem" onclick="javascript:load(' + beforeNum + ',\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')"><a href="javascript:void(0)"><span class="pagepre"></span></a></li>';
                for (let i = begin; i <= end; i++) {
                    if (i == rm.data.pageNum) {
                        index += '<li class="paginItem current" onclick="javascript:load(' + i + ',\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                    } else {
                        index += '<li class="paginItem" onclick="javascript:load(' + i + ',\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')" ><a href="javascript:void(0)">' + i + '</a></li>';
                    }
                }
                let nextNum = rm.data.pageNum + 1;
                if (nextNum >= rm.data.totalPage) {
                    nextNum = rm.data.totalPage;
                }
                index += '<li class="paginItem" onclick="javascript:load(' + nextNum + ',\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')"><a href="javascript:void(0)"><span class="pagenxt"></span></a></li>';
                index += '<li class="paginItem" onclick="javascript:load(' + rm.data.totalPage + ',\'' + uIdlike + '\',\'' + uname + '\',\'' + deptNamelike + '\',\'' + statusId + '\')" ><a href="javascript:void(0)">末页</a></li>';

                $("#paginList").html(index);
            }
            ,
            error: function (rm) {
                alert(rm.msg)
            }
        });
    }

    //详情传值
    function view(uid) {
        localStorage.setItem("sysuid1", JSON.stringify(uid));
    }

    //修改传值
    function update(uid) {
        localStorage.setItem("sysuid2", JSON.stringify(uid));
    }

    //点击查询
    function queryUserList() {
        var uIdlike = $("#uIdlike").val();
        var uname = $("#uname").val();
        var deptNamelike = $("#deptName").val();
        var statusId = $("#statusId").val();
        var pageNum = 1;
        load(pageNum, uIdlike, uname, deptNamelike, statusId);
    }

</script>
<body>
<div class="place"><span>位置：</span>
    <ul class="placeul">
        <li><a href="findByPage">系统管理</a></li>
        <li><a href="findByPage">用户管理</a></li>
    </ul>
</div>
<div class="rightinfo">
    <form action="" method="post">
        <ul class="tools">
            <li><label>员工编号:</label>
                <input type="text" id="uIdlike" name="uIdlike"/>
            </li>
            <li><label>员工姓名:</label>
                <input type="text" id="uname" name="uname"/>
            </li>
            <li><label>所属部门：</label>
                <select id="deptName" name="deptNamelike">
                    <option value="">请选择部门</option>
                    <option value="">研发</option>
                    <option value="">销售</option>
                    <option value="">财务</option>
                </select>
            </li>
            <li><label>状态：</label>
                <select id="statusId" name="statusId">
                    <option value="">请选择状态</option>
                    <option value="0">待赋权</option>
                    <option value="1">在职</option>
                    <option value="2">离职</option>
                </select>
            </li>
            <li class="subBut" onclick="queryUserList()"><img src="../../../static/images/t06.png"/>查询</li>
            <li class="subBut" onclick="window.location.href='userAdd'"><img src="../../../static/images/t01.png"/>添加
            </li>
        </ul>
        <table class="tablelist" id="usersTable">
            <thead>
            <tr>
                <th>序号</th>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>联系电话</th>
                <th>所属部门</th>
                <th>职位</th>
                <th>性别</th>
                <th>年龄</th>
                <th>状态</th>
                <th>入职时间</th>
                <th>离职时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>9527</td>
                <td>唐寅</td>
                <td>17370899727</td>
                <td>研发部</td>
                <td>经理</td>
                <td>男</td>
                <td>28</td>
                <td>在职</td>
                <td>2013-09-09 15:05:05</td>
                <td></td>
                <td>
                    <a href="userUpdate.html" class="tablelink">修改</a>
                    <a href="javascript:void(0);" class="tablelink" onclick="tipOpen('您确定此员工离职吗？')">离职</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>9528</td>
                <td>唐寅</td>
                <td>17370899727</td>
                <td>研发部</td>
                <td>高级工程师</td>
                <td>男</td>
                <td>28</td>
                <td>在职</td>
                <td>2013-09-09 15:05:05</td>
                <td>2013-09-09 15:05:05</td>
                <td>
                    <a href="userUpdate.html" class="tablelink">修改</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>9529</td>
                <td>唐寅</td>
                <td>17370899727</td>
                <td>研发部</td>
                <td>初级工程师</td>
                <td>男</td>
                <td>28</td>
                <td>在职</td>
                <td>2013-09-09 15:05:05</td>
                <td></td>
                <td>
                    <a href="userUpdate.html" class="tablelink">修改</a>
                    <a href="javascript:void(0);" class="tablelink" onclick="tipOpen('您确定此员工离职吗？')">离职</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>9530</td>
                <td>唐寅</td>
                <td>17370899727</td>
                <td>研发部</td>
                <td>初级工程师</td>
                <td>男</td>
                <td>28</td>
                <td>在职</td>
                <td>2013-09-09 15:05:05</td>
                <td></td>
                <td>
                    <a href="userUpdate.html" class="tablelink">修改</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagin" id="pagin">
            <div class="message">共<i class="blue" id="totalCount">1256</i>条记录，当前显示第&nbsp;<i class="blue" id="pageNum">2&nbsp;</i>页
            </div>
            <ul class="paginList" id="paginList">
                <!--                <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;">1</a></li>-->
                <!--                <li class="paginItem current"><a href="javascript:;">2</a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;">3</a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;">4</a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;">5</a></li>-->
                <!--                <li class="paginItem more"><a href="javascript:;">...</a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;">10</a></li>-->
                <!--                <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
            </ul>
        </div>
    </form>
    <!-- 提示框 -->
    <div id="tip" class="tip">
        <div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
        <div class="tipinfo"><span><img src="../../../static/images/ticon.png"/></span>
            <div class="tipright">
                <p></p>
                <cite>如果是请点击确定按钮 ，否则请点取消。</cite></div>
        </div>
        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定" onclick="tipClose()"/>
            &nbsp;
            <input name="" type="button" class="cancel" value="取消" onclick="tipClose()"/>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
